<template>
  <div class="beautifyContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="beautifyMain">
      <div class="content">
        <audio :src="audioRef" ref="audioRefPlay"></audio>
        <ul id="all">
          <li
            v-for="(item, index) in playList"
            :key="index"
            @mousedown="play(item, index)"
            @mouseup="playUp()"
            :ref="el => getLiRef(el, index)"
          >
            {{ item }}
          </li>
          <li id="CD4" class="black" style="left:24px;"></li>
          <li id="DE4" class="black" style="left:65px;"></li>

          <li id="FG4" class="black" style="left:143px;"></li>
          <li id="GA4" class="black" style="left:185px;"></li>
          <li id="AB4" class="black" style="left:227px;"></li>

          <li id="CD5" class="black" style="left:303px;"></li>
          <li id="DE5" class="black" style="left:344px;"></li>

          <li id="FG5" class="black" style="left:424px;"></li>
          <li id="GA5" class="black" style="left:464px;"></li>
          <li id="AB5" class="black" style="left:505px;"></li>

          <li id="CD6" class="black" style="left:582px;"></li>
          <li id="DE6" class="black" style="left:624px;"></li>

          <li id="FG6" class="black" style="left:702px;"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { tr } from 'element-plus/es/locale/index.mjs';

const route = useRoute()
const router = useRouter()

const playList = ref<string[]>([
  'C3',
	'D3',
	'F3',
	'G3',
	'A3',
	'B3',
	'C4',
	'D4',
	'E4',
	'F4',
	'G4',
	'A4',
	'B4',
	'C5',
	'D5',
	'E5',
	'F5',
	'G5',
	'A5',
])

const audioRef = ref<any>(null)
const audioRefPlay = ref<any>(null)

const liRef = ref<any>(null)
const liRefList = ref<HTMLElement[]>([])
const getLiRef = (el: any, index: any) => {
  if (el) {
    liRefList.value[index] = el
  }
}

const play = (val: string, index?: any) => {
  nextTick(() => {
    audioRefPlay.value.pause()
    audioRef.value = '../../../../../public/music/' + val.toLowerCase() + '.wav.mp3'
    audioRefPlay.value.play().catch((err: any)=>{
      console.log(err)
      play(val, index)
    })
    liRef.value = liRefList.value[index]
    liRef.value.style = 'background: rgba(0, 0, 0, .5);color: #fff;'
  })
}

const playUp = () => {
  if (liRef.value) {
    liRef.value.style = 'background: #fff;'
  }
}

const handleKeyDown = (event: any) => {
  let k = event.key.toLowerCase()
  switch(k) {
    case "q":
      play('C3', 0)
      break;
    case "w":
      play('D3', 1)
      break;
    case "e":
      play('F3', 2)
      break;
    case "r":
      play('G3', 3)
      break;
    case "t":
      play('A3', 4)
      break;
    case "y":
      play('B3', 5)
      break;
    case "u":
      play('C3', 6)
      break;
    case "i":
      play('D4', 7)
      break;
    case "o":
      play('E4', 8)
      break;
    case "p":
      play('F4', 9)
      break;
    case "a":
      play('G4', 10)
      break;
    case "s":
      play('A4', 11)
      break;
    case "d":
      play('B4', 12)
      break;
    case "f":
      play('C5', 13)
      break;
    case "g":
      play('D5', 14)
      break;
    case "h":
      play('E5', 15)
      break;
    case "j":
      play('F5', 16)
      break;
    case "k":
      play('G5', 17)
      break;
    case "l":
      play('A5', 18)
      break;
    default:
      return false;
  }
  return false;
}


onMounted(() => {
  ElMessageBox.confirm('鼠标点击  或  按下按键 Q 到 L 即可进行演奏, ⚠️ 注：功能暂不完善，为了您的体验, 请不要同时按下多个按钮, 弹奏间隔不要过快，谢谢！', '🎹 演奏前先阅读', {
    type: 'warning',
    confirmButtonText: '确定',
    showClose: false,
    showCancelButton: false,
    closeOnClickModal: false,
  })
    .then(() => {
      // 添加键盘事件监听
      document.addEventListener('keydown', handleKeyDown)
      document.addEventListener('keyup', playUp)
    })
    .catch((e: any) => {
      console.log(e)
      router.back()
    })
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('keyup', playUp)
})

</script>

<style lang="scss" scoped>
.beautifyContent {
  width: 100%;
  padding: 30px;
  // background:url(bg_4.jpg);
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .beautifyMain {
    width: 100%;
    margin-top: 20px;
    overflow-x: auto;
    .content {
      #all{
        width: 800px;
        height: 300px;
        border:solid 0px #333;
        margin:100px auto;
        position:relative;
      }
      li {
        width:5%;
        height:100%;
        background:#fff;
        float:left;
        border-right:solid 2px black;
        border-radius:0px 0px 8px 8px;
        text-align:center;
        line-height:35em;
        cursor:pointer;
      }
      :hover {
        opacity: 0.9;
      }
      .black{
        width:4%;
        height:60%;
        background:#111;
        border-radius:0px 0px 10px 10px;
        left:10px;
        top:0px;
        position:absolute;
      }
    }
  }

}
</style>